import React, { ReactElement } from 'react';
import './index.scss';

type defaultType = {
  children: ReactElement;
  active: string;
  onChange: (name: string) => void;
};

export const ActiveContext = React.createContext({
  value: '',
  onChange: (name: string) => {},
});

const Tabs = (props: defaultType) => {
  
  const { active, onChange } = props;

  const array = props.children.props.children.map((el:ReactElement)=>{
    return el.props;
  })

  //const ob = useRef<{ [key: string]: ReactElement }>({});

  let ele = null;

  array.forEach((item:{name:string,children:ReactElement})=>{
    const { name,children } = item;
    if(name === active){
      ele = children;
    }
  })

  const payload = {
    value: active,
    onChange(name: string) {
      onChange(name);
    },
  };

  return (
    <div className="tabs">
      <div className="headers">
        <ActiveContext.Provider value={payload}>
          {props.children}
        </ActiveContext.Provider>
      </div>
      <div className="content">{ele ? ele : null}</div>
    </div>
  );
};

export default Tabs;
